<template>
    <div class="home">
        <el-container>
            <el-header>
                <div class="time">{{nowTime}}</div>
                <div class="title">xxx医院疫苗管理系统</div>
                <div class="me">
                    <img src="../assets/logo.png" alt="" @click='drawer2=true'>
                    <el-button type="primary" style="margin-left: 16px" @click="unLogin">退出</el-button>
                    <!--右侧抽屉-->
                    <el-drawer v-model="drawer2" >
                        <div class="header">
                            <img src="../assets/logo.png" alt="" @click='drawer2=true'>
                        </div>
                        <div class="material">
                            <div v-for="(val,key,i) in user" :key="i">
                                <span v-if="key=='name'">片区名称</span>
                                <span v-if="key=='company'">公司</span>
                                <span v-if="key=='site'">地址</span>
                                <span v-if="key=='phone'">联系电话</span>
                                <input type="text" v-model="user[key]">
                            </div>
                        </div>
                        <template #footer>
                            <div style="flex: auto">
                                <el-button @click="cancelClick">取消</el-button>
                                <el-button type="primary" @click="confirmClick">保存</el-button>
                            </div>
                        </template>
                    </el-drawer>
                </div>
            </el-header>
            <el-container>
                <el-aside width="150px">
                    <keep-alive>
                        <tab/>
                    </keep-alive>
                </el-aside>
                <el-main>
                    <div class="content">
                        <transition name="slide-fade">
                            <router-view/>
                        </transition>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import { ElMessageBox, ElMessage } from 'element-plus'
    import Tab from './Tab'
    export default {
        name: "Home",
        components:{Tab},
        data(){
            return{
                nowTime:'',
                drawer2:false,
                user:{
                    name:'西南片区疫苗发放点',
                    company:'华西科技',
                    site:'西华大道999号',
                    phone:'086-1254621',
                }
            }
        },
        methods:{
            timeFormate(timeStamp) {
                let year = new Date(timeStamp).getFullYear();
                let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
                let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
                let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
                let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
                let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
                this.nowTime = year + "-" + month + "-" + date +"  "+"星期"+'日一二三四五六'.charAt(new Date().getDay())+" "+hh+":"+mm+':'+ss ;
            },
            unLogin(){
                ElMessageBox.confirm(
                    '确认要退出?',
                    'Warning',
                    {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        ElMessage({
                            type: 'success',
                            message: '退出成功',
                        })
                        this.$router.push('/Login')
                    })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消退出',
                        })
                    })
            },
            nowTimes(){
                this.timeFormate(new Date());
                setInterval(this.nowTimes,1000);
                this.clear()
            },
            clear(){
                clearInterval(this.nowTimes)
                this.nowTimes = null;
            },
            cancelClick() {
                this.drawer2 = false
            },
            //修改个人信息
            confirmClick() {
                this.drawer2 = false
            },

        },
        mounted() {
            this.nowTimes();
        },
        beforeUnmount() {
            this.clear();
        }
    }
</script>

<style scoped lang="less">
    .slide-fade-enter-active {
        transition: all 1s ease-out;
    }

    .slide-fade-leave-active {
        transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter-from,
    .slide-fade-leave-to {
        transform: translateX(40px);
        opacity: 0;
    }
    .home{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
    }
    .content{
        width: 98%;
        background-color: #eee;
    }
    .el-header{
        display: flex;
        justify-content: space-around;
        align-items: center;
        .time,.title,.me{
            text-align: center;
            width: 25%;
            height: 100%;
            line-height: 60px;

        }
        .me{
            display: flex;
            align-items: center;
            img{
                width: 40px;
                height: 40px;
                border-radius: 20px;
                margin-right: 20px;
            }
        }
    }
    .header{
        img{
            width: 80px;
            height: 80px;
            border-radius: 40px;
        }
    }
    .material{
        display: flex;
        flex-direction: column;
        div{
            margin-bottom: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            span{
                width: 20%;
                text-align: left;
            }
            .el-input{
                width: 60%;
            }
            input{
                width: 60%;
                padding: 10px 10px;
                border: 1px solid #aaa;
                border-radius: 10px;
            }
        }
    }
</style>
